<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<!-- 使用自定义组件 my-component，并传递宽度值 100 -->
			<my-component :width="100"></my-component>
		</div>
		<script src="../js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script>
			// 定义名为'my-component'的 Vue 组件
			Vue.component('my-component', {
				// 声明组件接收名为'width'的属性
				props: ['width'],
				// 定义组件的模板
				template: '<div :style="style" style="background-color: yellow;">组件内容宽100px，背景颜色为黄色。</div>',
				// 定义计算属性
				computed: {
					// 计算样式属性
					style: function() {
						// 返回一个包含宽度的对象，宽度值由传入的 width 属性决定，并加上'px'单位
						return {
							width: this.width + 'px'
						}
					}
				}
			});
			// 创建一个新的 Vue 实例，并将其挂载到具有 id 为 'app' 的元素上
			var app = new Vue({
				el: '#app',
			})
		</script>

	</body>
</html>